<template>
  <!--  编辑商品对话框  -->
  <div class="upload">
    <el-dialog
      :title="title"
      :visible.sync="isEdit"
      width="40%"
      :before-close="cancel">
      <el-form ref="goodValidate" :model="productData" :rules="ruleValidate" label-width="120px" v-if="isFinished">
        <el-form-item label="标题" prop="title">
          <el-input v-model.trim="productData.title" placeholder="请输入" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品外部链接" prop="link">
          <el-input v-model.trim="productData.link" placeholder="请输入" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品封面" prop="thumbnail" >
          <upload
            @handleRemove="handleRemove"
            :file-list="productData.thumbnail ? [productData.thumbnail] : []"
            @handleSuccess="handleSuccess"
            :max-size="5120"
            :limit="1"
            v-if="isFinished"
          >
          </upload>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="productData.price" placeholder="请输入" autocomplete="off"></el-input> 元
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Upload from '@/framework/components/upload'
import {save} from "@/project/service/product";

export default {
  name:'edit',
  components: { Upload },
  props: {
    isEdit:{
      type: Boolean,
      default: () => {
        return false
      }
    },
    productId:{
      type: String,
      default: () => {
        return ''
      }
    },
    liveId:{
      type: String,
      default: () => {
        return ''
      }
    },
    rowData:{
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    const photoValidator = (rule, value, callback) => {
      if (!this.photoValidate) {
        callback(new Error('请上传商品封面'))
      } else {
        callback()
      }
    }
    return {
      id:'',//请求参数提交的id
      title: '',//头部标题
      //表单校验规则
      ruleValidate: {
        title: [{required: true, message: '不能为空', trigger: 'blur'}],
        link: [{required: true, message: '不能为空', trigger: 'blur'}],
        thumbnail: [{ required: true, validator: photoValidator, trigger: 'blur'}],
      },
      productData:{},//编辑对话框中的表单
      photoValidate:false,//是否上传了图片
      isFinished:false,
    }
  },
  watch:{
    isEdit(val){
      if(val){
        this.title = this.productId ? '编辑商品' : '添加外部商品'
        this.id = this.liveId ? this.liveId : this.productId
        // this.productData = this.rowData ? this.rowData : {}  //外部商品管理编辑商品信息
        if(this.rowData){
          this.productData = this.rowData
          this.photoValidate = true
        }
        this.isFinished = true
      }
    }
  },
  methods: {
    //删除图片触发
    handleRemove(){
      this.photoValidate = false
    },
    //上传成功时触发
    handleSuccess(res){
      console.log(res)
      this.productData.thumbnail = res.Location
      this.photoValidate = true
    },
    //提交审核
    submit(){
      this.$nextTick(() => {
        this.$refs['goodValidate'].validate(valid => {
          console.log('触发')
          if(valid){
            let obj = this.productData
            obj.type = "link"
            //上传视频时商品橱窗添加商品，将数据传回给父组件
            if(!this.liveId && !this.productId){
              console.log(obj)
              let list = []
              list.push(obj)
              this.$store.commit('addProductList',list)
              this.$message.success('添加成功')
              setTimeout(()=>{
                this.cancel(true)
              },0)
            }else{
              obj.live = {id: this.id}
              let param = {productList:[obj]}
              // console.log(param)
              save(param,data => {
                console.log(data)
                if(data == '204'){
                  this.$message.success('添加成功')
                  this.cancel()
                }
              })
            }
          }
        })
      })
    },
    //取消
    cancel(isUpdate){
      // this.$refs.goodValidate.resetFields()
      this.productData = {}
      this.photoValidate = false
      this.isFinished = false
      this.$emit('close',isUpdate);
    }
  }
}
</script>

<style lang="less" scoped>

</style>
